<template>
    <div class="hello">
        <h3>{{ msg }}</h3>
        <hr/>
        <h3>setup的使用</h3>
        <div>
            name:{{name}},age:{{age}}
        </div>
        <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>  <br>
        <hr/>

    </div>
</template>

<script>
    // import {ref,reactive} from 'vue'
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        setup(){ // setup 不允许前面加async
            let name = '张三'
            let age = 18
            //方法
            function sayHello(){
                console.log(`我叫${name}，我${age}岁了，你好啊！`)
            }
            function test2(){
                console.log(name)
                console.log(age)
                console.log(sayHello)
            }
            return {
                name,
                age,
                sayHello,
                test2,
            }

            //返回一个函数（渲染函数） 了解
            // return ()=> h('h1','尚硅谷')
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 10px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>
